<script lang="ts" setup>
import type { FormInstance, FormRules } from 'element-plus'
import { defineEmits, defineProps } from "vue";
const props = defineProps({
  data: {
    type: Object,
    required: true
  },
  viewType: {
    type: String,
    default: 'add'
  }
})
const emit = defineEmits(["concel"]);
const ruleFormRef = ref<FormInstance>()
const rules = ref<FormRules>({
  name: [
    { required: true, message: '请选择巡检人员', trigger: 'blur' }
  ],
  startDate: [
    { required: true, message: '请选择任务时间', trigger: 'change' }
  ],
  template: [
    { required: true, message: '请选择任务模版', trigger: 'change' }
  ]
})
const formData = ref<any>({
  tourStaff: '',
  startDate: '',
  endDate: '',
  template: ''
})
const templateList = ref<any>([
  {
    code: '1',
    name: '张三'
  },
  {
    code: '2',
    name: '李四'
  }
])
const daterange = ref<any>([])
const dateChange = (val: any) => {
  formData.value.startDate = val[0]
  formData.value.endDate = val[1]
}
async function addSubmit() {
  ruleFormRef.value && ruleFormRef.value.validate(async (valid: any) => {
    if (valid) {
      console.log(formData.value)
      handleConcel(true)
    }
  })
}

function handleConcel(isResh: boolean) {
  emit("concel", isResh);
}

</script>

<template>
  <!-- <el-card> -->
    <div>
      <el-form
      ref="ruleFormRef"
      :model="formData"
      label-position="right"
      label-width="100px"
      :rules="rules"
      :disabled="props.viewType === 'view'"
>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="任务名称" prop="name">
              <el-input v-model="formData.name" placeholder="请输入任务名称" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="任务时间" prop="startDate">
              <el-date-picker
                  v-model="daterange"
                  value-format="YYYY-MM-DD"
                  type="daterange"
                  style="width: 100%;"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="dateChange"
                />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="任务模版" prop="template">
              <el-select v-model="formData.template" clearable placeholder="请选择任务模版">
                <el-option v-for="item in templateList" :key="item.code" :label="item.name" :value="item.code" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24" style="text-align: center;">
            <el-button @click="handleConcel(false)">取消</el-button>
            <el-button type="primary" @click="addSubmit">确定</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
  <!-- </el-card> -->
</template>
<style lang='scss' scope></style>
